<template>
    <div class="bet-render" :style="{ height: height }">
        <div
            class="bet-render-item"
            v-for="(percent,betKey) in betPercents"
            :key="betKey"
            :style="getRenderItemStyle(betKey,percent)"
        ></div>
    </div>
</template>

<script>
import { getRenderColor } from "@/utils/poker/poker-config";

export default {
    name: "BetRender",
    props: {
        betPercents: {
            type: Object,
        },
        height: {
            type: String,
            default: "0",
        },
    },
    methods: {
        getRenderItemStyle(betKey,percent) {
            return {
                background: getRenderColor(betKey),
                width: `${percent}%`,
            };
        },
    },
};
</script>

<style lang="scss">
.bet-render {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    display: flex;

    .bet-render-item {
        height: 100%;
    }
}
</style>
